<template>
  <div>
    <div class="search">
      <div class="video">
        <video loop src="@/assets/dh.mp4" width="100%" muted autoplay></video>
      </div>
      <input
        type="text"
        class="int"
        :placeholder="this.plc"
        @focus="foucs"
        @blur="blur"
        v-model="keyword"
        
      />
      <button class="search-btn iconfont"></button>
      <div class="hot" v-if=" fa2 == 1">
        <h3 class="hottitle">热搜</h3>
        <ul class="hotlist">
          <li v-for="item in hotlist" :key="item.id">
            {{ item.id }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.show_name }}
            <img :src= imgfn(item.icon)  alt="">
          </li>
        </ul>
      </div>
      <div class="word" v-if="fa2 ==3">
        <ul>
          <li v-for="item in termlist" :key="item.id">{{item.value}}</li>
          
        </ul>
      </div>
    </div>

    <div class="zhezhao" v-if="this.fa == 1">
      <iframe :src="play" frameborder="0"></iframe>
      <div class="close" @click.stop="close">X</div>
    </div>
    <div class="boxhead">游戏区-推荐</div>
    <Game :arr="gameList" @link="link($event)"></Game>
  </div>
</template>

<script>
import { gettuijian } from '@/api/tuijian'
import { getmoren, gethot, getterm } from '@/api/search'
import Game from '../tuijian/game.vue'
import imghot from '../../assets/hot.png'
export default {
  data() {
    return {
      gameList: {}, //游戏视频列表
      play: '', //视频接口的链接组合
      fa: '0', //视频框的阀
      fa2:0, //搜索框的阀
      fa3: 0, //搜索框的阀2号
      plc: '', //输入框默认关键字
      hotlist: {}, //热搜列表
      keyword:'', //输入值的绑定
      timeout: '', //防抖变量
      termlist: {}
    }
  },
  async created() {
    const res = await gettuijian()
    console.log(res)
    this.gameList = res.data.game
    this.getmorena()
  },
  components: {
    Game,
  },
  methods: {
    link(url) {
      this.fa = 1
      this.play =
        'https://player.bilibili.com/player.html?aid=' +
        url[0] +
        '&bvid=' +
        url[1] +
        '&cid=' +
        url[2] +
        '&page=1'
    },
    close() {
      this.fa = 0
    },
    async getmorena() {
      const { data } = await getmoren()
      this.plc = data.data.show_name
    },
    async foucs() {
      try {
        const { data } = await gethot({ limit: 10 })
        this.hotlist = data.list
        //读取成功才开启热词模块
        this.fa2 = 1
        this.fa3 = 1
      } catch (error) {
        console.log(error)
      }
    },
    blur() {
      this.fa2 =0
      this.fa3 = 0
      
    },
    imgfn(item) {
      if (item) {
        return imghot
      }else{
        return ''
      }
    },
    async gettermlist(item) {
      try {
        const { data } = await getterm(item)
        this.termlist = data
        console.log(this.termlist);
      } catch (error) {
        console.log(error);
      }
      
    }
    
  },
  watch: {
    keyword: function() {
      if (this.keyword) {
        this.fa2 = 3 //开启提示框
      } else if(this.fa3 ==0){
        this.fa2 =0//关闭提示框，并看看有没有焦点，没有则关闭所有框
      }else {
        this.fa2 =1
      }
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        this.gettermlist(this.keyword)
      }, 1000);
    }
  }
}
</script>

<style lang='less'>
video::webkit-media-controls {
  display: none;
}
.zhezhao {
  display: flex;
  position: absolute;
  width: 100%;
  height: 1000px;
  background: url('../../assets/zhezhao.png');
  iframe {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 500px;
    height: 300px;
    opacity: 0.4;
    transform: translate(650px, -250px);
  }
  .close {
    position: relative;
    top: 140px;
    left: 1340px;
    width: 200px;
    height: 200px;
    font-size: 50px;
    color: white;
    cursor: pointer;
  }
}
.search {
  width: 100%;

  height: 166px;
  video {
    position: absolute;
    top: 0;
  }
  .int {
    position: absolute;
    width: 26%;
    height: 40px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 20px;
    font-size: 16px;
  }
  .search-btn {
    position: absolute;
    top: 10px;
    left: 63%;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    cursor: pointer;
    transform: translateX(-1px);
    &::before {
      content: '\e60c';
      width: 20px;
      height: 20px;
    }
    &:hover {
      color: #02a2d6;
    }
  }
  .hot {
    position: absolute;
    top: 53px;
    width: 28%;
    height: 230px;
    left: 49%;
    padding: 12px;
    transform: translateX(-43%);
    background-color: #fff;
    z-index: 3;
    .hottitle {
      font-size: 16px;
    }
    .hotlist {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 20px 0 20px;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      li {
        flex: 50%;
        height: 20%;
        padding: 5px;
        cursor: pointer;
        &:hover {
          background-color: #f4f4f4;
        }
        img {
          height: 16px;
        }
      }
    }
  }
  .word {
     position: absolute;
    top: 53px;
    width: 28%;
    height: 350px;
    left: 49%;
    padding: 12px;
    transform: translateX(-43%);
    background-color: #fff;
    z-index: 3;
    ul {
      padding: 10px 0 20px;
      li {
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        &:hover {
          background-color: #f4f4f4;
        }
      }
      
    }
  }
}

.boxhead {
  width: 1400px;
  margin: 0 auto;
  height: 100px;
  background-color: pink;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
}
</style>
